<template>
    <div class="baritme">
        <div v-if="isActive" @click="mactive"><slot name="baritme-ico"></slot></div>
        <div v-else><slot name="baritme-ico-active"></slot></div>
        <div class="baritme-text" :style="color">
            <slot name="baritme-text"></slot>
        </div>
        
    </div>
</template>
<script>
export default {
    name: "Baritme",
    props:{
        path:String,
        acColor:{
            type:String,
            default:'red'

        }
    },
    data(){
        return{
            // isActive:true
            
        }
    },
    computed:{
        isActive(){
            return this.$route.path.indexOf(this.path) === -1
        },
        color(){
            return this.isActive ? {} : {color:this.acColor}
        }
    },
    methods:{
        mactive(){
            
            this.$router.push(this.path)
        }
        
    }
};
</script>

<style scoped>
.baritme {
    flex: 1;
}
.baritme{
    font-size: 14px;
    
}

</style>